<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="关键字:" prop="enTitle">
        <el-input
          size="mini"
          v-model="queryParams.enTitle"
          placeholder="请输入关键字/标题"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="通知场景:" prop="sceneType">
        <el-select
          style="width: 300px"
          size="mini"
          v-model="queryParams.sceneType"
          clearable
          filterable
          placeholder="请选择通知场景"
        >
          <el-option
            v-for="item in sceneOptions"
            :key="item.type"
            :label="item.name + '(' + item.type + ')'"
            :value="item.type"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          format="yyyy-MM-dd"
          value-format="timestamp"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          size="mini"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:interlaceNoticeList:add']"
        >新增通知</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="序号" type="index" align="center" min-width="5%"/>
      <el-table-column label="通知ID" align="center" prop="id" key="id"/>
      <el-table-column label="标题(中文)" align="center" prop="zhTitle" key="zhTitle"/>
      <el-table-column label="标题(英文)" align="center" prop="enTitle" key="enTitle"/>
      <el-table-column label="标题(日文)" align="center" prop="jaTitle" key="jaTitle"/>
      <el-table-column label="内容(中文)" align="center" prop="zhContent" key="zhContent"/>
      <el-table-column label="内容(英文)" align="center" prop="enContent" key="enContent"/>
      <el-table-column label="内容(日文)" align="center" prop="jaContent" key="jaContent"/>
      <el-table-column label="通知场景" align="center" prop="sceneType" key="sceneType"/>
      <el-table-column label="通知范围" align="center" prop="ntfObjRange" key="ntfObjRange">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ntf_obj_range" :value="scope.row.ntfObjRange"/>
        </template>
      </el-table-column>
      <el-table-column label="通知用户列表" align="center" prop="memberCount" key="memberCount">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="goMemberList(scope.row)"
          >
            {{ scope.row.memberCount }} 人
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:interlaceNoticeList:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <member-detail ref="member-detail"/>

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="标题(中文):" prop="zhTitle">
          <el-input v-model="form.zhTitle" placeholder="请输入通知标题" maxlength="55"/>
        </el-form-item>
        <el-form-item label="标题(英文):" prop="enTitle">
          <el-input v-model="form.enTitle" placeholder="请输入通知标题" maxlength="55"/>
        </el-form-item>
        <el-form-item label="标题(日文):" prop="jaTitle">
          <el-input v-model="form.jaTitle" placeholder="请输入通知标题" maxlength="55"/>
        </el-form-item>
        <el-form-item label="内容(中文):" prop="zhContent">
          <el-input type="textarea" v-model="form.zhContent" placeholder="请输入内容" maxlength="255"/>
        </el-form-item>
        <el-form-item label="内容(英文):" prop="enContent">
          <el-input type="textarea" v-model="form.enContent" placeholder="请输入内容" maxlength="255"/>
        </el-form-item>
        <el-form-item label="内容(日文):" prop="jaContent">
          <el-input type="textarea" v-model="form.jaContent" placeholder="请输入内容" maxlength="255"/>
        </el-form-item>
        <el-form-item label="通知场景:" prop="sceneType">
          <el-select
            style="width: 100%"
            v-model="form.sceneType"
            clearable
            filterable
            placeholder="请选择通知场景"
          >
            <el-option
              v-for="item in sceneOptions"
              :key="item.type"
              :label="item.name + '(' + item.type + ')'"
              :value="item.type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通知范围:" prop="ntfObjRange">
          <el-radio-group v-model="form.ntfObjRange">
            <el-radio
              v-for="dict in dict.type.ntf_obj_range"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.ntfObjRange === 'customer'" label="通知用户:" prop="ntfObj">
          <el-select
            style="width: 100%"
            v-model="form.memberList"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择通知用户"
            @focus="loadUserOptions"
          >
            <template slot="tags" slot-scope="{ tag }">
              <span>{{ form.memberList.length }} 个用户</span>
            </template>
            <el-option
              v-for="item in userOptions"
              :key="item.id"
              :label="item.email"
              :value="item.id"
            >
              <span style="display: flex; align-items: center;">
                <span style="margin-right: 10px;">{{ item.email }}</span>
                <span style="margin-right: 10px;">{{ item.nickname }}</span>
              </span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitForm">发 布</el-button>
        <el-button size="mini" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <notice-member-list ref="notice-member-list"/>
  </div>
</template>
<script>
import noticeMemberList from "@/views/triones/appManage/notice/noticeList/memberList.vue";
import { pageList, delNotice, sceneList,addNotice } from "@/api/triones/notice";
import { memberList } from "@/api/triones/interlaceMember";
export default {
  name: "index",
  dicts: ['ntf_obj_range'],
  components: { noticeMemberList },
  data() {
    return {
      loading: false,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sceneType: undefined,
        enTitle: ''
      },
      dataList: [],
      total: 0,
      dateRange: [],
      title: '',
      open: false,
      form: {},
      rules:{
        zhTitle: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ],
        enTitle: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ],
        jaTitle: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ],
        zhContent: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        enContent: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        jaContent: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        sceneType: [
          { required: true, message: "通知场景不能为空", trigger: "blur" }
        ],
        ntfObjRange: [
          { required: true, message: "通知范围不能为空", trigger: "blur" }
        ]
      },
      sceneOptions: [],
      mainContentOptions: [],
      userOptions: [],
    }
  },
  created() {
    this.getList();
    this.getNoticeSceneOptions();
  },
  methods: {
    getList() {
      this.loading = true;
      this.addDateRange(this.queryParams, this.dateRange);
      pageList(this.queryParams).then(res => {
        this.dataList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    getNoticeSceneOptions() {
      this.sceneOptions = [];
      sceneList().then(res => {
        this.sceneOptions = res.data;
      });
    },
    /** 检索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除通知ID为"' + row.id + '"的数据项，删除后用户将无法收到该通知?').then(() => {
        this.loading = true;
        return delNotice(id);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      });
    },
    handleAdd() {
      this.reset();
      this.getNoticeSceneOptions();
      this.title = "新增通知";
      this.open = true;
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.ntfObjRange === 'customer') {
            if (this.form.memberList.length === 0) {
              return  this.$modal.msgError("请最低选择一个通知用户！");
            }
          }
          this.$modal.confirm('通知发布后只能删除不能修改。是否确认该操作？').then(() => {
            addNotice(this.form).then(response => {
              this.$modal.msgSuccess("发布成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.open = false;
            });
          })
        }
      });
    },
    cancel() {
      this.open = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        zhTitle: undefined,
        enTitle: undefined,
        japTitle: undefined,
        zhContent: undefined,
        enContent: undefined,
        japContent: undefined,
        ntfObjRange: undefined,
        sceneType: undefined,
        memberList: []
      };
      this.resetForm("form");
    },
    loadUserOptions() {
      if (this.userOptions.length === 0) {
        memberList().then(res => {
          this.userOptions = res.data;
        });
      }
    },
    goMemberList(row) {
      this.$refs["notice-member-list"].show(row.id);
    },
  }
}
</script>
<style scoped lang="scss">

</style>
